<template>
  <ul class="slide-container">
    <li
      v-for="(i, index) in cards"
      :key="i"
      :data-key="index"
      class="slide-box"
      :style="{
        transform: `translate3d(${index < 2 ? (index - 2) * 15 : 0}px,${
          index < 2 ? (index - 2) * 15 : 0
        }px,${cards.length - index}px)`,
      }"
    >
      第{{ i }}张card
    </li>
    <!-- <button  class="prev control">&lt;</button> -->
    <div @click="onClick" class="next control">&gt;</div>
  </ul>
</template>

<script>
// import throttle from "@/utils/throttle";
export default {
  name: "SlideBox",
  data() {
    return {
      cards: [1, 2, 3, 4, 5, 6],
    };
  },
  methods: {
    onClick() {
      this.cards.push(this.cards.shift());
    },
  },
};
</script>

<style lang='less' scoped>
.slide-container {
  width: 350px;
  height: 550px;
  padding-left: 0;
  list-style: none;
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  .slide-box {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    position: absolute;
    border: 1px solid #ccc;
    background-color: #fff;
    transition: transform 0.6s ease;
  }
}
.control {
  position: absolute;
  //   z-index: 10086;
  transform: translateZ(50px);
  cursor: pointer;
  top: 50%; // 水平Y轴向上的偏移量 （上边缘的Y轴向上为0度） （
}
.prev {
  left: 10px; // 左边缘的X轴向上的偏移量 （也就是上边缘的Y轴向上为
}
.next {
  right: 10px;
}
</style>